<template>
    <div class="cart-listItem">
      <ul class="item__ul" v-for="(item, index) in goodItem" :key="index">
        <li class="item__li">

          <!-- 选中按钮 -->
          <div class="item-check" >
            <CheckBtn :isActive="item.checked" @click.native="changeActive(item)"/>
          </div>

          <!-- 每一项的图片 -->
          <div class="item-image">
            <img :src="item.image" alt="">
          </div>

          <!-- 每一项的信息内容 -->
          <div class="item-sellInfo">
            <!-- 标题 -->
            <div class="sell-title">
              <p>{{item.title}}</p>
            </div>
            <!-- 信息 -->
            <div class="sell-info">
              <p>{{item.desc}}</p>
            </div>
            <!-- 价格、件数 -->
            <div class="sell-priceAndNumebr">
              <span>￥{{item.price}}</span>
              <span>x{{item.count}}</span>
            </div>
          </div>

        </li>
      </ul>
    </div>
</template>

<script>
import CheckBtn from './CheckBtn';

export default {
  name: 'cartListItem',
  props: {
    goodItem: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {
    CheckBtn
  },
  methods: {
    changeActive(item) {
      item.checked = !item.checked;
    }
  }
}
</script>

<style scoped>
  .item__li{
    width: 100%;
    display: flex;
    padding: 15px 0 5px;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
  }

  /* 选中按钮 */
  .item-check{
    position: relative;
    width: 20px;
    margin-left: 12px;
  }


  /* 图片 */
  .item-image{
    width: 25%;
    height: 125px;
    margin-left: 15px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 15px;
  }
  .item-image img{
    width: 100%;
    border-radius: 10px;
  }

  /* 销售信息 */
  .item-sellInfo{
    width: 60%;
    padding-left: 10px;
  }
  .sell-title p, .sell-info p{
    width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
  }
  .sell-title p{
    font-size: 19px;
    color: rgba(0, 0, 0, .7);
  }
  .sell-info p{
    font-size: 17px;
    color: rgba(0, 0, 0, .5);
  }
  /* 价格、数量 */
  .sell-priceAndNumebr{
    display: flex;
    padding-top: 10px;
  }
  .sell-priceAndNumebr :nth-of-type(1){
    flex: 1;
    text-align: left;
    font-size: 20px;
    color: rgba(255, 0, 0, .6);
  }
  .sell-priceAndNumebr :nth-of-type(2){
    flex: 1;
    text-align: right;
    padding-right: 20px;
    font-size: 20px;
  }
</style>